<template>
  <div class="container mx-auto px-4 py-8 max-w-md">
    <h2 class="text-2xl font-bold mb-6">用户注册</h2>
    <form @submit.prevent="handleRegister" class="space-y-4">
      <div>
        <label for="userName" class="block text-sm font-medium text-gray-700">用户名</label>
        <input 
          type="text" 
          id="userName" 
          v-model="form.userName" 
          class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
          required
        >
      </div>
      <div>
        <label for="password" class="block text-sm font-medium text-gray-700">密码</label>
        <input 
          type="password" 
          id="password" 
          v-model="form.password" 
          class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
          required
        >
      </div>
      <div>
        <label for="realName" class="block text-sm font-medium text-gray-700">真实姓名</label>
        <input 
          type="text" 
          id="realName" 
          v-model="form.realName" 
          class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
          required
        >
      </div>
      <div>
        <label for="useType" class="block text-sm font-medium text-gray-700">用户类型</label>
        <select
          id="useType"
          v-model="form.useType"
          class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
          required
        >
          <option value="">请选择用户类型</option>
          <option value="1">管理员</option>
          <option value="2">普通用户</option>
        </select>
      </div>
      <div>
        <label for="deptID" class="block text-sm font-medium text-gray-700">所在科室</label>
        <select
          id="deptID"
          v-model="form.deptID"
          class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
          required
        >
          <option value="">请选择科室</option>
          <option value="1">内科</option>
          <option value="2">外科</option>
          <option value="3">儿科</option>
          <option value="4">妇产科</option>
          <option value="5">眼科</option>
          <option value="6">口腔科</option>
          <option value="7">皮肤科</option>
          <option value="8">精神科</option>
          <option value="9">急诊科</option>
        </select>
      </div>
      <div class="pt-4">
        <button
          type="submit"
          class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"
        >
          注册
        </button>
      </div>
      <div v-if="errorMessage" class="text-red-500 text-sm mt-2">
        {{ errorMessage }}
      </div>
      <div v-if="successMessage" class="text-green-500 text-sm mt-2">
        {{ successMessage }}
      </div>
    </form>
    <div class="mt-6 text-center">
      <RouterLink to="/login" class="text-primary-600 hover:text-primary-900">已有账号？登录</RouterLink>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import service from '@/utils/request'

const router = useRouter()
const form = ref({
  userName: '',
  password: '',
  realName: '',
  useType: '',
  deptID: ''  // 添加deptID字段
})
const errorMessage = ref('')
const successMessage = ref('')

const handleRegister = async () => {
  try {
    // 清空消息
    errorMessage.value = ''
    successMessage.value = ''
    
    // 验证表单
    if (!form.value.userName || !form.value.password || !form.value.realName || !form.value.useType || !form.value.deptID) {
      errorMessage.value = '请填写所有必填字段'
      return
    }
    
    // 数据格式处理 - 将useType和deptID转换为整数
    const userData = {
      ...form.value,
      useType: parseInt(form.value.useType),
      deptID: parseInt(form.value.deptID)  // 确保deptID作为整数提交
    }
    
    console.log('准备发送注册请求:', userData)
    
    // 发送注册请求
    const response = await service.post('/user/register', userData)
    
    console.log('注册响应:', response)
    
    if (response.success) {
      successMessage.value = '注册成功，即将跳转到登录页面...'
      setTimeout(() => {
        router.push('/login')
      }, 3000)
    } else {
      errorMessage.value = response.message || '注册失败，请重试'
    }
  } catch (error) {
    console.error('注册请求失败:', error)
    
    // 更详细的错误处理
    if (error.response) {
      if (error.response.status === 500) {
        errorMessage.value = `服务器内部错误 (${error.response.status})`
      } else {
        errorMessage.value = `请求失败: ${error.response.status} ${error.response.statusText}`
      }
      
      if (error.response.data && error.response.data.message) {
        errorMessage.value += ': ' + error.response.data.message
      }
    } else if (error.request) {
      errorMessage.value = '服务器未响应，请检查网络连接'
    } else {
      errorMessage.value = '发生错误: ' + error.message
    }
  }
}
</script>